<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	a{ text-decoration: none; }
	a:link { color: blue }               /* 未被访问的链接 */
	a:visited { color: blue }            /* 已被访问过的链接 */ 
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
<script language=javascript>
	function goToPage(goPage){
		//因为js代码有要去的页码  可以在js中直接判断
		if(goPage<1){
			/* alert("当前已经是第一页了  不能上一页"); */
			return ; 
		}
		//获得最大页数
		var totalPage = '${pageBeanContact.totalPage}';
		if(goPage>totalPage){ //当前页大于 最大页数
			/* alert("当前已经是最后一页了  不能下一页"); */
			return ; 
		}
		
		
		//函数的参数为 将要访问的页码 只需要条件 即可 
		//而条件在表单当中  我如果将页码也放入了表单  只需要提交表单 那条件有了 页码也有了
		
		//获得隐藏域 并且赋值即可
		$("#pageNumberId").val(goPage);
		
		//提交表单  先获得表单 再提交即可
		$("#contactForm").submit();
	};
 	
	
</script>
</head>
<body>
	<h2>今日联系学生</h2>
	<s:form action="contact" namespace="/customer" id="contactForm" name="contactForm">
		<s:iterator value="contacts" var="c">
			<p>今日联系学生总人数：${c.countContact }
		</s:iterator> 
		&nbsp;&nbsp;还未联系人数：${pageBeanContact.totalRecord}</p>
		<table >
		<!-- 页码的隐藏域 -->
		<input type="hidden" name="pageNumber" value="1" id="pageNumberId"/>
			<tr style="FONT-WEIGHT: bold; FONT-STYLE: normal; BACKGROUND-COLOR: #eeeeee; TEXT-DECORATION: none">
				<td>学生ID</td>
				<td>学生姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>爸爸电话</td>
				<td>妈妈电话</td>
				<td>跟进状态</td>
				<td>本次联系日期</td>
				<td>家庭住址</td>
				<td>备注</td>
				<td>负责员工</td>
				<td>操作</td>
			</tr>
		
			<c:forEach items="${pageBeanContact.data}" var="customer">
			<tr style="FONT-WEIGHT: normal; FONT-STYLE: normal; BACKGROUND-COLOR: white; TEXT-DECORATION: none">
				<td>${customer.studentId }</td>
				<td>${customer.studentName }</td>
				<td>${customer.studentSex ==0 ? "男" : "女"}</td>
				<td>${customer.studentAge }</td>
				<td>${customer.phone1 }</td>
				<td>${customer.phone2 }</td>
				<td>${customer.followUp }</td>
				<td>${customer.nextDate }</td>
				<td>${customer.address }</td>
				<td>${customer.remark }</td>
				<td>${customer.affiliatedTeacher.userName }</td> 
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				<td>
					<a href="${pageContext.request.contextPath}/customer/editUIcontact?studentId=${customer.studentId}">
						修改
					</a>
				</td>
			</tr>
			</c:forEach>
		</table>
		<div style="height: 20px; text-align: right; margin-top:10px; font-size: 17px;" >
			共[<b>${pageBeanContact.totalRecord}</b>]条记录&nbsp;,&nbsp;第[<b>${pageBeanContact.pageNumber}</b>]页
			&nbsp;&nbsp;
			[<a href="javascript:void(0)" onclick="goToPage(${pageBeanContact.pageNumber-1})">上一页</a>]
			<b>
				<%-- 前五后四动态条 前四后五动态条 其目的主要是保证数据一直在中间 不发生变化 --%>
				<c:forEach begin="${pageBeanContact.start}" end="${pageBeanContact.end}" step="1" var="numContact">
				<%-- <c:forEach begin="1" end="${pageBean.totalPage}" step="1" var="num"> --%>
					<a href="javascript:void(0)" onclick="goToPage(${numContact})" >
						<font ${numContact == pageBeanContact.pageNumber ? "color='red'" : ""}>&nbsp;${numContact}</font>
					</a>
				</c:forEach>
			</b>&nbsp;
			[<a href="javascript:void(0)" onclick="goToPage(${pageBeanContact.pageNumber+1})">下一页</a>] 
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</div>	
	</s:form>
</body>
</html>